<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Examples</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" charset="utf-8">
		<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" charset="utf-8">
		<link rel="stylesheet" href="css/datepicker.css" type="text/css" media="screen" charset="utf-8">


		<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.plugins.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/cufon-yui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Museo_400.font.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body id="home">

	  <div id="wrapper">

	  	<div id="header" class="clearfix">

	  		<ul class="clearfix">
  				<li><a href="index.html">Home</a></li>
  				<li><a href="#">Map of Rome</a></li>
  				<li><a href="#">Destinations</a></li>
  				<li><a href="#">Hotels</a></li>
  				<li><a href="video.html">Videos</a></li>
  				<li><a href="#">Photos</a></li>
  				<li><a href="#">Voices Around the World</a></li>
  				<li><a href="&#0109;&#97;&#105;&#108;&#116;&#111;&#58;&#98;o&#114;&#0101;&#0100;&#064;&#099;&#97;&#109;&#101;&#114;&#111;&#110;&#109;&#0111;&#108;&#0108;&#046;&#99;&#0111;&#109;?subject=Hey%20Cameron, about%20Roma%20Italia..."><em>Contact Us</em></a></li>
  			</ul>
				
				<h1><a href="#">Roma Italia</a></h1>
				
				<h2>Your Guide to the Eternal City</h2>
				
				<form action="#" method="get" accept-charset="utf-8">
					<fieldset>
						<legend></legend>
						<label for="search-input">Search</label>
						<input type="text" id="search-input" name="search" value="" title="Search" />
						<input type="image" name="" src="img/search-go.gif" />
					</fieldset>
				</form>		
	  	</div><!-- header结束 -->

	  	<div id="main">
	  		
	  		<div id="myCarousel" class="carousel slide">
  		    <!-- 轮播（Carousel）指标 -->
  		    <ol class="carousel-indicators">
		        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		        <li data-target="#myCarousel" data-slide-to="1"></li>
		        <li data-target="#myCarousel" data-slide-to="2"></li>
		        <li data-target="#myCarousel" data-slide-to="3"></li>
		        <li data-target="#myCarousel" data-slide-to="4"></li>
		        <li data-target="#myCarousel" data-slide-to="5"></li>
		        <li data-target="#myCarousel" data-slide-to="6"></li>
  		    </ol>   

  		    <!-- 轮播（Carousel）项目 -->
  		    <div class="carousel-inner">
		        <div class="item active">
	            <img src="img/feature-arch.jpg" height="320" width="710" alt="First slide">
		        </div>
		        <div class="item">
	            <img src="img/feature-colosseo.jpg" height="320" width="710" alt="Second slide">
		        </div>
		        <div class="item">
	            <img src="img/feature-locks.jpg" height="320" width="710" alt="Third slide">
		        </div>
		        <div class="item">
	            <img src="img/feature-trevi.jpg" height="320" width="710" alt="Four slide">
		        </div>
		        <div class="item">
	            <img src="img/feature-santamaria.jpg" height="320" width="710" alt="Five slide">
		        </div>
		        <div class="item">
	            <img src="img/feature-vittoriano.jpg" height="320" width="710" alt="Six slide">
		        </div>
		        <div class="item">
	            <img src="img/feature-trajan.jpg" height="320" width="710" alt="Seven slide">
		        </div>

	  		  </div>
	  		    <!-- 轮播（Carousel）导航 -->
	  		    <a class="carousel-control left" href="#myCarousel" 
	  		        data-slide="prev">&lsaquo;
	  		    </a>
	  		    <a class="carousel-control right" href="#myCarousel" 
	  		        data-slide="next">&rsaquo;
	  		    </a>

	  		</div><!-- myCarousel结束 -->

	  		<div id="main-featurette">

	  			<div id="featurette1">
	  				<a href="http://www.amazon.com/gp/product/8883706218?ie=UTF8&amp;tag=authenticbore-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=8883706218"><img src="img/moleskine.png" height="111" width="125" alt="Moleskine journal for Roma, Rome" /></a>	
	  				<h4><a href="http://www.amazon.com/gp/product/8883706218?ie=UTF8&amp;tag=authenticbore-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=8883706218">Roma Moleskine</a></h4>
	  				<p>
	  				"The ultimate traveler&rsquo;s journal." City maps, removable sheets, and a 96-page tabbed archive.</p>
	  				<ul>
	  					<li><a href="http://www.amazon.com/gp/product/8883706218?ie=UTF8&amp;tag=authenticbore-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=8883706218">Buy at Amazon.com</a></li>
	  				</ul>
	  			</div>

	  			<div id="featurette2">
	  				<a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAudiobook?id=278673543&amp;s=143441"><img src="img/earbud.png" alt="iPod earbuds" width="103" height="89"></a>
	  				<h4><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAudiobook?id=278673543&amp;s=143441">Free Audio Tour of Rome</a></h4>
	  				<p>
	  				Download our free, award-winning audio tour of Rome’s top locations, from Vatican City to the Colosseum.</p>
	  				<ul>
	  					<li><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAudiobook?id=278673543&amp;s=143441">iTunes</a></li>
	  					<li><a href="#">MP3 format</a></li>
	  				</ul>
	  			</div>
	  		</div><!-- mian-featurette结束 -->

	  		<div id="video">
	  			<h3>video: ROMA ITALIA</h3>
	  			<a href="#"><img src="img/bigthumb-video.jpg" height="178" width="310" alt="Frame from the video Roma Italia"></a>
	  		</div><!-- video结束 -->

	  		<div id="interactive">
	  			<h3>Interactive: Map of Rome</h3>
	  			<a href="#"><img src="img/bigthumb-map.jpg" alt="Interactive map of Rome, powered by Google" width="310" height="178"></a>
	  		</div><!-- interactive结束 -->

	  		<div id="popular">
	  			<h3>Popular Destinations</h3>
	  			<ul>
	  				<li><a href="#">The Colosseum</a></li>
	  				<li><a href="#">The Pantheon</a></li>
	  				<li><a href="#">St. Peter&rsquo;s Basilica</a></li>
	  				<li><a href="#">Vatican City</a></li>
	  				<li><a href="#">Sistine Chapel</a></li>
	  				<li><a href="#">Spanish Steps</a></li>
	  				<li><a href="#">Trevi Fountain</a></li>
	  				<li><a href="#">Roman Roads</a></li>
	  			</ul>
	  			<ul>
	  				<li><a href="#">Roman Forum</a></li>
	  				<li><a href="#">The Aventine</a></li>
	  				<li><a href="#">Circus Maximus</a></li>
	  				<li><a href="#">Arch of Constantine</a></li>
	  				<li><a href="#">The Capitol</a></li>
	  				<li><a href="#">The Vittore Emanuele II</a></li>
	  				<li><a href="#">Castel St. Angelo</a></li>
	  				<li><a href="#"><strong>View all (76)</strong></a></li>
	  			</ul>
	  		</div><!-- popular结束 -->

	  		<div id="voices">
	  			<h3>Voices Around the World</h3>
	  			<ul>
	  				<li class="l1" id="map1" style="top: 80px; left: 55px;"><a href="#"><em>&ldquo;I couldn&rsquo;t get enough of the gelato. The flavors and texture are way different than anything we have here.&rdquo;</em></a></li>
	  				<li class="l1" id="map2" style="top: 61px; left: 53px;"><a href="#"><em>&ldquo;Absolutely divine. Don&rsquo;t skip the Il Vittoriano. Its size alone is impressive. There&rsquo;s a stunning view from the top.&rdquo;</em></a></li>
	  				<li class="l2" id="map3" style="top: 51px; right: 145px;"><a href="#"><em>&ldquo;Rawk. What a place. I'll definitely be coming back next summer. Same hotel. Rome FTW.&rdquo;</em></a></li>
	  				<li class="l1" id="map4" style="top: 72px; right: 15px;"><a href="#"><em>&ldquo;There are no wrong turns in Rome. Every path is a new adventure. Ignore the map once in a while.&rdquo;</em></a></li>
	  				<li class="l2" id="map5" style="top: 132px; right: 12px;"><a href="#"><em>&ldquo;I&rsquo;ve seen the Colosseum in photos, but it's SO much more stunning in person. Set aside an entire day to view it.&rdquo;</em></a></li>
	  				<li class="l2" id="map6" style="top: 50px; right: 131px;"><a href="#"><em>&ldquo;L&rsquo;Archetto di Cavour on Via Cavour is one of the best restaurants in downtown Rome. Anything on the menu.&rdquo;</em></a></li>
	  				<li class="l2" id="map7" style="top: 60px; right: 30px;"><a href="#"><em>&ldquo;Visit the Trevi fountain at night. Most of the tourists clear out around 10pm. Beautiful at night.&rdquo;</em></a></li>
	  			</ul>
	  			<p>
	  			<a href="#">View all</a> <a href="#">Share</a> <a href="http://twitter.com/roma_italia"><strong>Follow @roma_italia</strong></a> </p>
	  		</div><!-- voices结束 -->

	  	</div><!-- main结束 -->

	  	<div id="secondary">
	  		<div id="secondary-feature">
	  			<p>
	  			&ldquo;As long as the Colossus stands, so shall Rome; when the Colossus falls, Rome shall fall; when Rome falls, so falls the world.&rdquo; &ndash;The Venerable Bede, ca. 672–735</p>
	  		</div>

	  		<div id="secondary-featurette">
	  			<h4>Search for Hotels in Rome</h4>
	  			<form action="">
	  				<fieldset>
	  					<legend>Select a date</legend>
	  					<label for="checkin">Check in:</label>
	  					<input type="text" id="checkin" value="dd/mm/yy" class="calendarRange">

	  					<label for="checkout">Check out:</label>
	  					<input type="text" id="checkout" value="dd/mm/yy" class="calendarRange">

	  				</fieldset>

	  				<div>
	  					<select>
	  						<option label="I&rsquo;d like to stay near&hellip;" value="">I&rsquo;d like to stay near&hellip;</option>
								<option label="Everything" value="">Everything</option>
								<optgroup label="Transportation">
									<option label="Termini (train, bus, &amp; taxi station)" value="">Termini (train, bus, &amp; taxi station)</option>
									<option label="Rome Fiumicino Airport" value="">Rome Fiumicino Airport</option>
								</optgroup>
								<optgroup label="Location">
									<option label="Central Rome" value="">Central Rome</option>
									<option label="Vatican City, St Peter's Basilica, &amp; Sistine Chapel" value="">Vatican City, St Peter's Basilica, &amp; Sistine Chapel</option>
									<option label="The Colosseum &amp; Roman Forum" value="">The Colosseum &amp; Roman Forum</option>
									<option label="Spanish Steps" value="">Spanish Steps</option>
									<option label="Trevi Fountain" value="">Trevi Fountain</option>
									<option label="The Pantheon" value="">The Pantheon</option>
									<option label="The Capitol &amp; The Vittore Emanuele II" value="">The Capitol &amp; The Vittore Emanuele II</option>
									<option label="The Aventine" value="">The Aventine</option>
									<option label="Circus Maximus" value="">Circus Maximus</option>
									<option label="Castel St. Angelo" value="">Castel St. Angelo</option>
								</optgroup>
	  					</select>
	  					<input type="image" name="" src="img/search-sm.png">
	  				</div>
	  			</form>
	  		</div>

	  		<div id="photos">
	  			<h3>Photo Galleries</h3>

	  			<a href="#"><img src="img/thumb-sistine.jpg" alt="Thumbnail photo of the Sistine Chapel" width="93" height="93"></a>
					<a href="#"><img src="img/thumb-vatican.jpg" alt="Thumbnail photo of St Peter's Square" width="93" height="93"></a>
					<a href="#"><img src="img/thumb-arch.jpg" alt="Thumbnail photo of the Arch of Constantine" width="93" height="93"></a>
					<a href="#"><img src="img/thumb-trajan.jpg" alt="Thumbnail photo of Trajan's Column" width="93" height="93"></a>
					<a href="#"><img src="img/thumb-soldier.jpg" alt="Thumbnail photo of Roman soldier" width="93" height="93"></a>
					<a href="#"><img src="img/thumb-focaccia.jpg" alt="Thumbnail photo of the Italian food" width="93" height="93"></a>
	  		</div>
	  	</div><!-- secondary结束 -->

	  	<div id="footer">
  			<p id="footer-links">
  			<a href="#">Home</a> <a href="#">Map of Rome</a> <a href="#">Destinations</a> <a href="#">Hotels</a> <a href="video.html">Videos</a> <a href="#">Photos</a> <a href="#">Voices Around the World</a> <a href="&#0109;&#97;&#105;&#108;&#116;&#111;&#58;&#98;o&#114;&#0101;&#0100;&#064;&#099;&#97;&#109;&#101;&#114;&#111;&#110;&#109;&#0111;&#108;&#0108;&#046;&#99;&#0111;&#109;?subject=Hey%20Cameron, about%20Roma%20Italia...">Contact Us</a></p>
  			<p>
  			&copy; 2009 <a href="http://cameronmoll.com/">Cameron Moll</a>. All rights reserved.</p>
  			<p>
  			This is a fictitious website created strictly for educational purposes and may not be reproduced without permission.</p>
  			<p>
  			<strong>Buy the book at Amazon: <a href="http://bit.ly/cssmastery"><em>CSS Mastery</em></a></strong></p>
	  		<div id="cameronmoll"><a href="http://cameronmoll.com/"><img src="img/cameronmoll.png" alt="Cameron Moll" width="124" height="23"></a></div>
	  		</div>
	  	</div><!-- footer结束 -->

	  </div><!-- wrapper结束 -->
	</body>
</html>